
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
<!--    <meta name="Keywords" content="P2P红包,网贷加息,理财返利">-->
<!--    <meta name="description" content="“投呗”为您提供丰富的平台活动，P2P理财红包、加息返利活动，为您的投资收益更添一筹，理财就选投呗！"/>-->
    <title>充电运营</title>
    <link rel="stylesheet" href="../css/common.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../css/index.css?v=1.2.2"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/layer.css"/>
    <!--    <link rel="stylesheet" href="../css/personalCenter.css" type="text/css">
        &lt;!&ndash;插件样式表&ndash;&gt;
        <link rel="stylesheet" href="../lib/css/dropload.css" type="text/css">-->
    <link rel="stylesheet" href="../lib/css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 顶部标题 */
        .page-title {
            text-align: center;
            font-size: 18px;
            padding: 16px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }

        /* 单车统计卡片 */
        .bike-stats-card {
            background: linear-gradient(to right, #28a745, #2ecc71);
            color: #fff;
            border-radius: 12px;
            margin: 16px;
            padding: 16px;
        }
        .stats-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .stats-item {
            width: 32%;
            text-align: center;
            margin-bottom: 12px;
        }
        .stats-item span {
            display: block;
            font-size: 14px;
            margin-top: 4px;
        }
        .stats-number {
            font-size: 16px;
            font-weight: bold;
            color: #fff936;
        }

        /* 运营中心模块 */
        .operation-center {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 12px;
            padding: 16px;
        }
        .operation-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .operation-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .operation-item {
            width: 23%;
            text-align: center;
            margin-right: 2%;
            margin-bottom: 12px;
        }
        .operation-item img {
            width: 40px;
            height: 40px;
            margin-bottom: 4px;
            border-radius: 8px;
        }
        .operation-item span {
            display: block;
            font-size: 14px;
        }

        /* 底部导航 */
        .footer-nav {
            background-color: #fff;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .footer-nav-item {
            text-align: center;
        }
        .footer-nav-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
        .footer-nav-item span {
            display: block;
            font-size: 12px;
        }
        .footer-nav-item.active {
            color: #28a745;
        }
    </style>

</head>
<body>
<div class="wrap activity_page">
    <section class="container">
        <!-- 顶部标题 -->
        <div class="page-title">单车</div>

        <!-- 单车统计卡片 -->
        <div class="bike-stats-card">
            <div class="stats-title">单车统计</div>
            <div class="stats-row">
                <div class="stats-item">
                    <span class="stats-number"id="zongshouyi"></span>
                    <span>总收益(元)</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number" id="jinrichongdian"></span>
                    <span>今日充电(元)</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number" id="jinriyongdian"></span>
                    <span>今日用电(度)</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number" id="shebeishu"></span>
                    <span>设备数量</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number" id="zaixianshu"></span>
                    <span>在线数量</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number" id="lixianshu"></span>
                    <span>离线数量</span>
                </div>
            </div>
        </div>
<!--        !&#45;&#45; 运营中心 &ndash;&gt;-->
        <div class="operation-center">
            <div class="operation-title">运营中心</div>
            <div class="operation-list">
                <div class="operation-item" id="manualInvoiceItem1">
                    <img src="../img/xiaoquguanli.png">
                    <span>小区管理</span>
                </div>
                <div class="operation-item" id="manualInvoiceItem2">
                    <img src="../img/shebei.png">
                    <span>设备管理</span>
                </div>
                <div class="operation-item" id="manualInvoiceItem3">
                    <img src="../img/jifeicelue.png">
                    <span>计费策略</span>
                </div>
                <div class="operation-item" id="manualInvoiceItem4">
                    <img src="../img/chongdianjilu.png">
                    <span>充电记录</span>
                </div>
                <div class="operation-item" id="manualInvoiceItem5">
                    <img src="../img/shebeiluru.png">
                    <span>设备录入</span>
                </div>
            </div>
        </div>
        <ul class="footer">
            <li class="footer-item">
                <a href="index.html" class="">
                    <i class="icon icon_index"></i>
                    <p class="icon_title">首页</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="invest.html" class="">
                    <i class="icon icon_invest"></i>
                    <p class="icon_title">汽车</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="activity.html" class="">
                    <i class="icon icon_activity active"></i>
                    <p class="icon_title" style="color: #368a28">单车</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="personal.html" class="">
                    <i class="icon icon_my"></i>
                    <p class="icon_title">我的</p>
                </a>
            </li>
        </ul>
    </section>
</div>
</body>
<script src="../js/manualInvoiceTip.js"></script>
<script src="../lib/js/jquery-2.1.4.js"></script>
<script src="../lib/js/jquery.base64.js"></script>
<script src="../js/wapframwork.js"></script>
<script>
    // 页面加载完成后执行
    window.onload = function() {
        // 示例数据（可根据实际需求替换为真实数据来源）
        const statsData = {
            danchetotalIncome: 0.00,    // 总收益
            danchetodayCharge: 0.00,      // 今日充电
            danchetodayElectricity: 0.00, // 今日用电
            danchehdeviceCount: 0,          // 设备数量
            dancheonlineCount: 0,          // 在线数量
            dancheofflineCount: 0           // 离线数量
        };

        // 设置统计数据到页面
        document.getElementById('zongshouyi').textContent = `￥${statsData.danchetotalIncome.toFixed(2)}`;
        document.getElementById('jinrichongdian').textContent = `￥${statsData.danchetodayCharge.toFixed(2)}`;
        document.getElementById('jinriyongdian').textContent = statsData.danchetodayElectricity.toFixed(2);
        document.getElementById('shebeishu').textContent = statsData.danchehdeviceCount;
        document.getElementById('zaixianshu').textContent = statsData.dancheonlineCount;
        document.getElementById('lixianshu').textContent = statsData.dancheofflineCount;

        setupManualInvoiceTip('manualInvoiceItem1');
        setupManualInvoiceTip('manualInvoiceItem2');
        setupManualInvoiceTip('manualInvoiceItem3');
        setupManualInvoiceTip('manualInvoiceItem4');
        setupManualInvoiceTip('manualInvoiceItem5');


    };
</script>
<!--插件-->
<!--<script src="../lib/js/dropload.js"></script>-->
<!--0807 1.2-->
<script src="../lib/js/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/swiper.min.js"></script>

<!--头部-->
<script src="../lib/js/RainbowBridge.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    setTitle(".active_title", {'title': '活动'});
</script>
<script src="../js/activity.js?v=1.2.2" type="text/javascript" charset="utf-8"></script>
</html>
